<template>
  <div class="login-container">
    <div class="box-left">
      <img src="../assets/images/logo.png" alt="" class="logo" />
    </div>
    <div class="box-right">
      <h1 class="login-title">河北保尔办公自动化平台</h1>
      <el-form :model="state" :rules="rules" ref="formRef" status-icon hide-required-asterisk>
        <el-form-item prop="username">
          <el-input v-model="state.username" placeholder="用户账号" class="elinput" ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="state.password" type="password" placeholder="用户密码" show-password class="elinput"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin" style="border-radius: 12px;" >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { login } from '../../src/components/api/Login'
const router = useRouter()
const state = reactive({
  username: '',
  password: '',
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' },
  ],
}

//登入接口
// 修改后的登录函数（返回 Promise）
async function Login() {
  try {
    let data = {
      account: state.username,
      password: state.password,
    }
    const res = await login('login', data)
    if (res.code == 200) {
      sessionStorage.setItem('token', res.dataset.token)
      localStorage.setItem('user', JSON.stringify(res.dataset.user))
      if (res.dataset.className) {
        localStorage.setItem('userClassName', JSON.stringify(res.dataset.className))
      } else {
        localStorage.setItem('userClassName', JSON.stringify(''))
      }
      if (res.dataset.projectId) {
        localStorage.setItem('userProjectId', JSON.stringify(res.dataset.projectId))
      } else {
        localStorage.setItem('userProjectId', JSON.stringify(''))
      }

      ElMessage.success('登录成功')
      setTimeout(() => {
        router.push('/allTotal')
      }, 1000)
    } else {
      ElMessage.error('账号或密码错误')
    }
  } catch (error) {
    console.error('登录失败', error)
  }
}

const formRef = ref(null)

const handleLogin = async () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 调用登录函数
      Login()
    }
  })
}
</script>

<style scoped>
:deep(.elinput .el-input__wrapper){
  border-radius: 12px !important;
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  /* 背景图片 */
  background-image: url('@/assets/images/登录.png');
  background-size: 100% 100%;
}
.box-left {
  min-width: 400px;
  min-height: 400px;
  background-color: #e9f0f8;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 25px !important;    /* 左上圆角 */
  border-bottom-left-radius: 25px !important; /* 左下圆角 */
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}
.logo {
  width: 330px;
}
.box-right {
  min-width: 400px;
  min-height: 400px;
  background-color: #ffffff;
  border-top-right-radius: 25px !important;   /* 右上圆角 */
  border-bottom-right-radius: 25px !important; /* 右下圆角 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
}
.login-box {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  width: 500px;
  height: 500px;
}

.login-title {
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
  margin-bottom: 30px;
}
.el-form-item {
  margin-bottom: 30px;
}
.el-input {
  width: 300px;
  height: 40px;
  margin: 0 auto;
  margin-bottom: 5px;
}
::v-deep .el-form-item__error {
  margin-left: 50px !important;
}

.el-input__inner {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px 12px;
  transition: border-color 0.3s ease;
}

.el-button--primary {
  width: 300px;
  height: 40px;
  margin: 0 auto;
  padding: 12px;
  /* 调整按钮背景色，与新背景相呼应 */
  background-color: #0f6ab1;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.el-button--primary:hover {
  background-color: #065b9c;
}
</style>